<template>
  <div>
    <main>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="auto"
        size="large"
      >
        <el-form-item label="" prop="name">
          <el-input
            v-model="ruleForm.name"
            :prefix-icon="User"
            placeholder="请输入姓名/手机号"
          />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            show-password
            placeholder="请输入密码"
            autocomplete="off"
            :prefix-icon="Lock"
          />
        </el-form-item>
        <el-form-item label="" prop="code">
          <el-col :span="12" class="left-col">
            <el-input
              v-model="ruleForm.code"
              :prefix-icon="ScaleToOriginal"
              placeholder="请输入验证码"
            />
          </el-col>
          <el-col :span="12" class="right-col">
            <div
              v-if="userStore.captchaImage"
              v-html="userStore.captchaImage"
              @click="getCode"
            ></div>
            <el-input v-else v-model="ruleForm.code" />
          </el-col>
        </el-form-item>

        <el-form-item label="" prop="checked">
          <el-col :span="12" class="left-col">
            <el-checkbox v-model="ruleForm.checked" label="记住我" />
          </el-col>
          <el-col :span="12" class="right-col">
            <span class="blur-tips" @click="changePanel('resetPwd')"
              >忘记密码？</span
            >
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()"> 登录 </el-button>
        </el-form-item>
      </el-form>
    </main>
    <footer>
      <p>
        你没有账号？
        <span class="blur-tips" @click="changePanel('register')">注 册</span>
        <el-divider @click="getUserInfo"> 其他 </el-divider>
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import { User, Lock, ScaleToOriginal } from "@element-plus/icons-vue";
const userStore = useUserStore();
const emit = defineEmits(["update:modelValue"]); //
const ruleForm = ref<any>({
  password: "",
  name: "",
  checked: false,
  code: "",
  callback: "aaa",
});
onMounted(() => {
  localStorage.removeItem("token");
  let loginInfo = JSON.parse(localStorage.getItem("loginInfo") || "{}");
  if (loginInfo && loginInfo.name && loginInfo.password) {
    ruleForm.value.name = loginInfo.name;
    ruleForm.value.password = loginInfo.password;
    ruleForm.value.checked = true;
  }

  userStore.getCodeRequest();
});
const getCode = () => {
  userStore.getCodeRequest();
};
const submitForm = () => {
  // console.log(returnCitySN["cip"]);
  // 用户名密码不能为空
  if (!ruleForm.value.name || !ruleForm.value.password) {
    ElMessage.error("用户名或密码不能为空");
    return;
  } else if (
    ruleForm.value.code.toLowerCase() != userStore.imgCode.toLowerCase()
  ) {
    ElMessage.error("验证码错误");
    // 字符转小写比较
    return;
  }
  if (ruleForm.value.checked) {
    localStorage.setItem(
      "loginInfo",
      JSON.stringify({
        name: ruleForm.value.name,
        password: ruleForm.value.password,
        checked: true,
      })
    );
  }
  // 登录的设备 pc or mobile
  let device = navigator.userAgent;
  if (
    device.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    )
  ) {
    // 手机端
    device = "mobile";
  } else {
    device = "pc";
  }

  userStore.loginRequest({
    ...ruleForm.value,
    ip: returnCitySN && returnCitySN["cip"],
    device,
  });
};
const changePanel = (type: "register" | "resetPwd") => {
  emit("update:modelValue", type);
};
const getUserInfo = () => {
  userStore.getUserInfoRequest();
};
</script>

<style lang="scss" scoped></style>
